<div class="auth-main">
    <div class="website-header">
        <div class="website-inline">
            <img class="header-img" src="./assets/img/login/login_logo_x.png" />
            <span class="header-span">长三角农药污染场地大数据管理平台</span>
        </div>
    </div>
    <div class="website-center">
        <div class="website-background">
            <div class="website-inline">
                <div class="auth-block">
                    <div class=title>
                        <h4>欢迎登录</h4>
                    </div>

                    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizonal">
                        <div class="row"
                            [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">
                            <div class="col-sm-12 form-name">
                                <input [formControl]="name" type="text" class="form-control" id="input_name"
                                    placeholder="请输入账号">
                            </div>
                        </div>
                        <div class="row"
                            [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
                            <div class="col-sm-12 form-password">
                                <input [formControl]="password" type="password" class="form-control" id="input_password"
                                    placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 form-checkbox">
                                <span class="checkbox-img" [ngClass]="{'checkbox-img-selected': remembered}"
                                    (click)="rememberAccount()"></span>
                                <span class="checkbox-span">记住用户名</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 form-button">
                                <button nz-button [ngSwitch]="submitted" [nzLoading]="submitted" id="submit"
                                    [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">
                                    <span *ngSwitchCase="false">登 录</span>
                                    <span *ngSwitchCase="true" style="width:80px">正在登录</span>
                                </button>
                            </div>
                        </div>
                        <div class="row message">
                            <div class="col-sm-12 form-message">
                                {{errors}}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="website-bottom">
        <span>
            版权所有：©2021 生态环境部南京环境科学研究所
            &nbsp;
            技术支持：苏州舆图数据科技有限公司
            &nbsp;
            版本号：v1.0.1
            <a href="mailto:service@atlasdata.cn">service@atlasdata.cn</a>
        </span>
    </div>
</div>
